<template>
  <div>
    <div>
      <div style="width:calc(50% - 10px);height:30%;float:left;margin:0px 0px 50px 0px">
        <span>原车</span>
        <FormPanel ref="formPanel" :list="formList" :cols="1" :labelWidth="110" :isSubmitBtn="false" @formChange="formChangeHandle" />
      </div>
      <div style="width:50%;height:30%;float:right;">
        <span>新车</span>
        <FormPanel ref="formPanel_new" :list="formList_new" :cols="1" :labelWidth="110" :isSubmitBtn="false" @formChange="formChangeHandle_new" />
      </div>
    </div>
    <div
      :style="{
        position: 'absolute',
        left: '200px',
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button v-show="this.isShowEdit" type="primary" :disabled="this.canEdit" @click="editDrawer">修改</el-button>
      <el-button v-show="this.isShowCon" type="primary" @click="editDrawer">合并</el-button>
      <el-button @click="closeDrawer">取消</el-button>
    </div>
    <!--选择车辆 -->
    <BaseDialog :visible.sync="visible" :title="dialogTitle" destroyOnClose width="70%" :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <queryVehiclePanel :parms="this.parms" @close="closeDialog" @vehicleData="vehicleData" />
    </BaseDialog>

    <!--车主明细 -->
    <Drawer :visible.sync="visible_owner" title="车主明细"  destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <addOwnerPanel :type.sync="this.type" :resData="this.resData" @close="closeHandler" />
    </Drawer>

    <!--车辆明细 -->
    <Drawer :visible.sync="visible_car" title="车辆明细"  destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <addVehiclePanel :type.sync="this.type" :resData="this.resData" @close="closeHandler_car" />
    </Drawer>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import queryVehiclePanel from './queryVehiclePanel';
import addOwnerPanel from '@/pages/customerRepair/customerInfo/ownerVehicleManagement/addOwnerPanel.vue';
import addVehiclePanel from '@/pages/customerRepair/customerInfo/ownerVehicleManagement/addVehiclePanel.vue';
import { licenseVinChange } from '@/api/customerRepair/customerInfo/vinChange';
import { findAllRepair } from '@/api/repair/basicParameters'; // 获取缺省参数
import { searchBrand, searchSeries, searchModel } from '@/api/customerRepair/customerComplaint/customerComplaintReception';

export default {
  name: 'vinChange',
  components: {
    queryVehiclePanel,
    addOwnerPanel,
    addVehiclePanel
  },
  mixins: [dictionary],
  props: {},
  data() {
    this.saveData = {};
    this.saveData_new = {};
    this.parms = {};
    this.parms_new = {};
    this.type = '';
    this.resData = {};
    return {
      visible: false,
      visible_owner: false,
      visible_car: false,
      isShowEdit: true,
      isShowCon: false,
      canEdit: true,
      dialogTitle: '',
      clickType: '',
      ownerCode: '',
      formList: this.createFormList(),
      formList_new: this.createFormList_new()
    };
  },
  computed: {},
  created() {
    this.queryDefaultPa();
    this.getBrand();
  },
  methods: {
    // 车牌号缺省参数
    async queryDefaultPa() {
      let res = await findAllRepair();
      this.formList.find(item => item.fieldName === 'license2').initialValue = res.data['1002']; // 车牌号前缀
      this.formList_new.find(item => item.fieldName === 'license3').initialValue = res.data['1002']; // 车牌号前缀
    },
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'license2',
          placeholder: '请输入...',
          onEnter: val => {
            this.queryVehicle(val);
          },
          rules: [
            {
              // required: true,
              pattern: /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[a-zA-Z](([DF]((?![IO])[a-zA-Z0-9](?![IO]))[0-9]{4})|([0-9]{5}[DF]))|[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1})$/,
              message: '请输入正确的车牌号'
            }
          ]
        },
        {
          type: 'INPUT',
          label: '原VIN',
          fieldName: 'vin2',
          placeholder: '请输入...',
          onEnter: val => {
            this.queryVehicle(val);
          }
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'license',
          placeholder: '请输入...',
          disabled: true
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          placeholder: '请输入...',
          readonly: true,
          disabled: true
          // unitRender: props => {
          //   return <el-button icon="el-icon-more" onClick={this.detail_car_old}></el-button>;
          // }
        },
        {
          type: 'INPUT',
          label: '发动机号',
          fieldName: 'engineNo',
          placeholder: '请输入...',
          disabled: true
        },
        {
          type: 'SELECT',
          label: '品牌',
          fieldName: 'brand',
          placeholder: '请选择...',
          itemList: [],
          change: val => {
            this.changePinpSelect(val);
          },
          disabled: true
        },
        {
          type: 'SELECT',
          label: '车系',
          fieldName: 'series',
          placeholder: '请选择...',
          itemList: [],
          change: val => {
            this.changeChexSelect(val);
          },
          disabled: true
        },
        {
          type: 'SELECT',
          label: '车型',
          fieldName: 'model',
          placeholder: '请选择...',
          itemList: [],
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车辆备注',
          fieldName: 'remark',
          placeholder: '请输入...',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车主编号',
          fieldName: 'ownerNo',
          placeholder: '请输入...',
          readonly: true,
          disabled: true
          // unitRender: props => {
          //   return <el-button icon="el-icon-more" onClick={this.detail_owner_old}></el-button>;
          // }
        },
        {
          type: 'SELECT',
          label: '车主性质',
          fieldName: 'ownerProperty',
          placeholder: '请输入...',
          itemList: this.createDictList('8011'),
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车主',
          fieldName: 'ownerName',
          placeholder: '请输入...',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车主地址',
          fieldName: 'address',
          placeholder: '请输入...',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '电话',
          fieldName: 'phone',
          placeholder: '请输入...',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '手机',
          fieldName: 'mobile',
          placeholder: '请输入...',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '联系人',
          fieldName: 'contactorName',
          placeholder: '请输入...',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '联系人电话',
          fieldName: 'contactorPhone',
          placeholder: '请输入...',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '联系人手机',
          fieldName: 'contactorMobile',
          placeholder: '请输入...',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车主备注',
          fieldName: 'remark1',
          placeholder: '请输入...',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '预收款',
          fieldName: 'prePay',
          placeholder: '请输入...',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '欠款金额',
          fieldName: 'arrearageAmount',
          placeholder: '请输入...',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '是否本公司购车 ',
          fieldName: 'isSelfCompany',
          placeholder: '请输入...',
          hidden: true
        }
      ];
    },
    createFormList_new() {
      return [
        {
          type: 'INPUT',
          label: '新车牌号',
          fieldName: 'license3',
          placeholder: '请输入...',
          onEnter: val => {
            this.queryVehicle_new(val);
          },
          change: val => {
            return this.showEdit(val);
          }
        },
        {
          type: 'INPUT',
          label: '新VIN',
          fieldName: 'vin21',
          placeholder: '请输入...',
          onEnter: val => {
            this.queryVehicle_new(val);
          },
          change: val => {
            return this.showEdit_vin(val);
          }
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'license11',
          placeholder: '请输入...',
          disabled: true
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vins',
          placeholder: '请输入...',
          readonly: true,
          disabled: true
          // unitRender: props => {
          //   return <el-button icon="el-icon-more" onClick={this.detail_car_new}></el-button>;
          // }
        },
        {
          type: 'INPUT',
          label: '发动机号',
          fieldName: 'engineNo11',
          placeholder: '请输入...',
          disabled: true
        },
        {
          type: 'SELECT',
          label: '品牌',
          fieldName: 'brand11',
          placeholder: '请选择...',
          itemList: [],
          change: val => {
            this.changePinpSelect_new(val);
          },
          disabled: true
        },
        {
          type: 'SELECT',
          label: '车系',
          fieldName: 'series11',
          placeholder: '请选择...',
          itemList: [],
          change: val => {
            this.changeChexSelect_new(val);
          },
          disabled: true
        },
        {
          type: 'SELECT',
          label: '车型',
          fieldName: 'model11',
          placeholder: '请选择...',
          itemList: [],
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车辆备注',
          fieldName: 'remark11',
          placeholder: '请输入...',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车主编号',
          fieldName: 'ownerNos',
          placeholder: '请输入...',
          readonly: true,
          disabled: true
          // unitRender: props => {
          //   return <el-button icon="el-icon-more" onClick={this.detail_owner_new}></el-button>;
          // }
        },
        {
          type: 'SELECT',
          label: '车主性质',
          fieldName: 'ownerProperty11',
          placeholder: '请输入...',
          itemList: this.createDictList('8011'),
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车主',
          fieldName: 'ownerNames',
          placeholder: '请输入...',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车主地址',
          fieldName: 'address11',
          placeholder: '请输入...',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '电话',
          fieldName: 'phone11',
          placeholder: '请输入...',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '手机',
          fieldName: 'mobile11',
          placeholder: '请输入...',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '联系人',
          fieldName: 'contactorName11',
          placeholder: '请输入...',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '联系人电话',
          fieldName: 'contactorPhone11',
          placeholder: '请输入...',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '联系人手机',
          fieldName: 'contactorMobile11',
          placeholder: '请输入...',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车主备注',
          fieldName: 'remark111',
          placeholder: '请输入...',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '是否本公司购车 ',
          fieldName: 'isSelfCompanyNew',
          placeholder: '请输入...',
          hidden: true
        }
      ];
    },
    queryOwner(val) {},
    // 原车
    queryVehicle() {
      this.dialogTitle = 'VIN选择';
      this.visible = true;
      this.clickType = 'old';
    },
    // 新车
    queryVehicle_new() {
      this.dialogTitle = 'VIN选择';
      this.visible = true;
      this.clickType = 'new';
    },
    formChangeHandle(val) {
      this.saveData = val;
    },
    formChangeHandle_new(val) {
      this.saveData_new = val;
    },
    // 修改按钮控制是否可编辑
    showEdit(val) {
      const license_old = this.formList.find(item => item.fieldName === 'license').initialValue;
      const vin = this.formList_new.find(item => item.fieldName === 'vin21').initialValue;
      if (license_old == undefined) {
        this.canEdit = true;
        this.isShowEdit=false;
      } else {
        if (val) {
          this.canEdit = false;
          this.isShowEdit=true;
        } else {
          if (vin) {
            this.canEdit = false;
            this.isShowEdit=true;
          } else {
            this.canEdit = true;
            this.isShowEdit=false;
          }
        }
      }
    },
    // 修改按钮控制是否可编辑
    showEdit_vin(val) {
      const license = this.formList_new.find(item => item.fieldName === 'license3').initialValue;
      const license_old = this.formList.find(item => item.fieldName === 'license').initialValue;
      if (license_old == undefined) {
        this.canEdit = true;
      } else {
        if (val) {
          this.canEdit = false;
        } else {
          if (license) {
            this.canEdit = false;
          } else {
            this.canEdit = true;
          }
        }
      }
    },
    // 修改 合并
    async editDrawer() {
      // 提交表单数据
      this.$refs.formPanel.SUBMIT_FORM();
      this.$refs.formPanel_new.SUBMIT_FORM();
      // 调用后台保存保存前判断
      // 判断是修改还是合并按钮
      if (this.isShowCon) {
        if (this.saveData.ownerNo == undefined || this.saveData_new.ownerNos == undefined) {
          this.$message({
            type: 'warning',
            message: '原车信息与新车信息存在空值,不能进行合并操作！'
          });
        } else if (this.formList.find(item => item.fieldName === 'license').initialValue == this.formList_new.find(item => item.fieldName === 'license11').initialValue) {
          this.$message({
            type: 'warning',
            message: '相同车辆,不能进行合并操作！'
          });
        } else {
          if (
            this.formList.find(item => item.fieldName === 'isSelfCompany').initialValue == 10041001 &&
            this.formList_new.find(item => item.fieldName === 'isSelfCompanyNew').initialValue == 10041002
          ) {
            this.$message({
              type: 'warning',
              message: '本公司购车限制合并！'
            });
            return;
          }
          if (this.saveData.ownerNo != this.saveData_new.ownerNos) {
            this.$message({
              type: 'warning',
              message: '车主必须相同,不能进行合并操作！'
            });
          } else {
            this.saveData = Object.assign(this.saveData, this.saveData_new);
            console.log('保存的数据', this.saveData);
            let res = {};
            res = await licenseVinChange(this.saveData);
            if (res.resultCode != 200) {
              this.$message({
                type: 'error',
                message: res.errMsg
              });
            } else {
              this.$message({
                type: 'success',
                message: '保存成功!'
              });
              this.formList.forEach(x => {
                x.initialValue = res.data[x.fieldName];
              });
              this.formList = [...this.formList];
            }
          }
        }
      } else {
        this.saveData = Object.assign(this.saveData, this.saveData_new);
        console.log('保存的数据', this.saveData);
        let res = {};
        res = await licenseVinChange(this.saveData);
        if (res.resultCode != 200) {
          this.$message({
            type: 'error',
            message: res.errMsg
          });
        } else {
          this.$message({
            type: 'success',
            message: '保存成功!'
          });
          this.formList.forEach(x => {
            x.initialValue = res.data[x.fieldName];
          });
          this.formList_new.forEach(x => {
            x.initialValue = res.data[x.fieldName];
          });
          this.formList = [...this.formList];
          this.formList_new = [...this.formList_new];
          // this.formList.find(item => item.fieldName === 'license').initialValue = res.data
        }
      }
    },
    vehicleData(val) {
      if (this.clickType === 'old') {
        this.formList.forEach(x => {
          x.initialValue = val[0][x.fieldName];
        });
        if (val[0].brand) {
          this.formList.find(item => item.fieldName === 'brand').initialValue = Number(val[0].brand);
          this.changePinpSelect(this.formList.find(item => item.fieldName === 'brand').initialValue);
        }
        if (val[0].series) {
          this.formList.find(item => item.fieldName === 'series').initialValue = Number(val[0].series);
          this.changeChexSelect(this.formList.find(item => item.fieldName === 'brand').initialValue, this.formList.find(item => item.fieldName === 'series').initialValue);
        }
        if (val[0].model) {
          this.formList.find(item => item.fieldName === 'model').initialValue = Number(val[0].model);
        }
        this.formList = [...this.formList];
        const vin = this.formList_new.find(item => item.fieldName === 'vin21').initialValue;
        const license = this.formList_new.find(item => item.fieldName === 'license3').initialValue;
        if (license || vin) {
          this.canEdit = false;
        } else {
          this.canEdit = true;
        }
      }
      if (this.clickType === 'new') {
        this.formList_new.forEach(x => {
          x.initialValue = val[0][x.fieldName];
        });
        if (val[0].brand11) {
          this.formList_new.find(item => item.fieldName === 'brand11').initialValue = Number(val[0].brand11);
          this.changePinpSelect_new(this.formList_new.find(item => item.fieldName === 'brand11').initialValue);
        }
        if (val[0].series11) {
          this.formList_new.find(item => item.fieldName === 'series11').initialValue = Number(val[0].series11);
          this.changeChexSelect_new(this.formList_new.find(item => item.fieldName === 'brand11').initialValue, this.formList_new.find(item => item.fieldName === 'series11').initialValue);
        }
        if (val[0].model11) {
          this.formList_new.find(item => item.fieldName === 'model11').initialValue = Number(val[0].model11);
        }
        this.formList_new = [...this.formList_new];
        this.isShowEdit = false;
        this.isShowCon = true;
      }
      this.ownerCode = val.OWNER_CODE;
    },
    closeDialog(val) {
      this.visible = val;
    },
    closeDrawer() {
      this.$refs.formPanel.RESET_FORM();
      this.$refs.formPanel_new.RESET_FORM();
      this.canEdit = true;
      this.isShowEdit = true;
      this.isShowCon = false;
      this.queryDefaultPa();
    },
    // 车主明细 原车主
    detail_owner_old() {
      if (this.clickType) {
        const ownerNo = this.formList.find(item => item.fieldName === 'ownerNo').initialValue;
        if (ownerNo) {
          this.type = 'show';
          this.visible_owner = true;
          this.resData = {
            OWNER_NO: ownerNo,
            OWNER_CODE: this.ownerCode
          };
        }
      }
    },
    // 车主明细 新车主
    detail_owner_new() {
      if (this.clickType) {
        const ownerNo = this.formList_new.find(item => item.fieldName === 'ownerNos').initialValue;
        if (ownerNo) {
          this.type = 'show';
          this.visible_owner = true;
          this.resData = {
            OWNER_NO: ownerNo,
            OWNER_CODE: this.ownerCode
          };
        }
      }
    },
    // 车辆明细 原车辆
    detail_car_old() {
      if (this.clickType) {
        const vin = this.formList.find(item => item.fieldName === 'vin').initialValue;
        if (vin) {
          this.type = 'show';
          this.visible_car = true;
          this.resData = {
            OWNER_NO: vin,
            OWNER_CODE: this.ownerCode
          };
        }
      }
    },
    // 车辆明细 新车辆
    detail_car_new() {
      if (this.clickType) {
        const vin = this.formList_new.find(item => item.fieldName === 'vins').initialValue;
        if (vin) {
          this.type = 'show';
          this.visible_car = true;
          this.resData = {
            OWNER_NO: vin,
            OWNER_CODE: this.ownerCode
          };
        }
      }
    },
    // 关闭车主明细弹框
    closeHandler(val) {
      this.visible_owner = val;
    },
    // 关闭车辆明细弹框
    closeHandler_car(val) {
      this.visible_car = val;
    },
    // 品牌
    async getBrand() {
      const res = await searchBrand();
      this.formList.find(item => item.fieldName === 'brand').itemList = res.data.map(x => ({ value: x.brandId, text: x.brandName }));
      this.formList_new.find(item => item.fieldName === 'brand11').itemList = res.data.map(x => ({ value: x.brandId, text: x.brandName }));
    },
    // 车系
    async getSeries(brandsid) {
      const res = await searchSeries(brandsid);
      this.formList.find(item => item.fieldName === 'series').itemList = res.data.map(x => ({ value: x.seriesId, text: x.seriesName }));
    },
    // 车型
    async getModel(brandsid, seriessid) {
      const res = await searchModel(brandsid, seriessid);
      this.formList.find(item => item.fieldName === 'model').itemList = res.data.map(x => ({ value: x.modelId, text: x.modelName }));
    },
    // 车系
    async getSeries_new(brandsid) {
      const res = await searchSeries(brandsid);
      this.formList_new.find(item => item.fieldName === 'series11').itemList = res.data.map(x => ({ value: x.seriesId, text: x.seriesName }));
    },
    // 车型
    async getModel_new(brandsid, seriessid) {
      const res = await searchModel(brandsid, seriessid);
      this.formList_new.find(item => item.fieldName === 'model11').itemList = res.data.map(x => ({ value: x.modelId, text: x.modelName }));
    },
    // 品牌下拉框改变时
    changePinpSelect(id) {
      this.clearFormItem(this.formList.find(item => item.fieldName === 'series'));
      this.clearFormItem(this.formList.find(item => item.fieldName === 'model'));
      if (!id) return;
      // 获取车系
      this.getSeries(id);
    },
    // 车系下拉框改变时
    changeChexSelect(id) {
      this.clearFormItem(this.formList.find(item => item.fieldName === 'model'));
      if (!id) return;
      // 获取车型
      this.getModel(this.formList.find(item => item.fieldName === 'brand').initialValue, id);
    },
    // 品牌下拉框改变时
    changePinpSelect_new(id) {
      this.clearFormItem(this.formList_new.find(item => item.fieldName === 'series11'));
      this.clearFormItem(this.formList_new.find(item => item.fieldName === 'model11'));
      if (!id) return;
      // 获取车系
      this.getSeries_new(id);
    },
    // 车系下拉框改变时
    changeChexSelect_new(id) {
      this.clearFormItem(this.formList_new.find(item => item.fieldName === 'model11'));
      if (!id) return;
      // 获取车型
      this.getModel_new(this.formList_new.find(item => item.fieldName === 'brand11').initialValue, id);
    },
    // 清空下拉框表当控件的值和下拉列表
    clearFormItem(item) {
      item.initialValue = undefined;
      item.itemList = [];
    }
  }
};
</script>

<style lang="less" scoped></style>
